<template>
    <div class="business-modal">
	    <Modal
	        v-model="modal"
	        title="普通的Modal对话框标题"
	        @on-ok="ok"
	        @on-cancel="cancel">
				<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="150">
					<FormItem label="主标题：" prop="name">
					<Row>
					<Col span="15"><Input size="large" v-model="formValidate.name" placeholder="请输入主标题"></Input></Col>
					</Row>
					</FormItem>

					<FormItem label="副标题：" prop="mail">
					<Row>
					<Col span="15"><Input size="large" v-model="formValidate.mail" placeholder="请输入副标题"></Input></Col>
					</Row>						
					</FormItem>

					<FormItem label="标签：" prop="mail">
					<Row>
					<Col span="15"><Input size="large" v-model="formValidate.mail" placeholder="请输入副标题"></Input></Col>
					</Row>                      
					</FormItem>
				</Form>
	    </Modal>       
    </div>
</template>

<script>
    export default {
    	props:{
          modal:Boolean
    	},
        data(){
           return {
                formValidate: {
                    name: '',
                    mail: '',
                    city: '',
                    gender: '',
                    interest: [],
                    date: '',
                    time: '',
                    desc: ''
                },
                ruleValidate: {
                    name: [
                        { required: true, message: '姓名不能为空', trigger: 'blur' }
                    ],
                    mail: [
                        { required: true, message: '邮箱不能为空', trigger: 'blur' },
                        { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
                    ],
                    city: [
                        { required: true, message: '请选择城市', trigger: 'change' }
                    ],
                    gender: [
                        { required: true, message: '请选择性别', trigger: 'change' }
                    ],
                    interest: [
                        { required: true, type: 'array', min: 1, message: '至少选择一个爱好', trigger: 'change' },
                        { type: 'array', max: 2, message: '最多选择两个爱好', trigger: 'change' }
                    ],
                    date: [
                        { required: true, type: 'date', message: '请选择日期', trigger: 'change' }
                    ],
                    time: [
                        { required: true, type: 'date', message: '请选择时间', trigger: 'change' }
                    ],
                    desc: [
                        { required: true, message: '请输入个人介绍', trigger: 'blur' },
                        { type: 'string', min: 20, message: '介绍不能少于20字', trigger: 'blur' }
                    ]
                }
           };
        },
        methods:{
        	ok(){

        	},
        	cancel(){

        	}
        }
    }
</script>

<style scoped>


</style>